<template name="score">
	<view class="video_pf">
		<image v-for="yellow in yellowNum" src="../static/icons/star-yellow.png" class="pf_icon"></image>
		<image v-for="gray in grayNum" src="../static/icons/star-gray.png" class="pf_icon"></image>
		<view class="video_pf_num" v-if="isShow">
			{{scoreNum}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"score",
		props:{
			scoreNum:0,   //分数  ---通过父级组件传入过来的分数
			isShow:0,     // 默认不显示  0不显示  1显示
		},
		data() {
			return {
				yellowNum:0, //定义黄色星星默认数量
				grayNum:5	 //定义黄色灰色默认数量
			};
		},
		//在实例化创建完毕立即被调用  进行计算
		created() {
			// 计算
			let scoreCopyNum = 0;
			if(this.scoreNum != null && this.scoreNum != undefined && this.scoreNum !=''){
				scoreCopyNum = this.scoreNum;
			}
			
			//计算传输入过来的分数 除以2 就能得到 黄颜色的星星数量
			let yellowNum = parseInt(scoreCopyNum/2);
			//灰色星星的数量用总数量5颗减去已知的黄色星星数量
			let grayNum = 5-yellowNum;
			
			this.yellowNum = yellowNum;
			this.grayNum = grayNum;
		}
	}
</script>

<style>

	.video_pf {
		width: 200upx;
		margin-top: 10upx;
		display: flex;
		flex-direction: row;

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.pf_icon {
		width: 20upx;
		height: 20upx;
		margin-top: 8upx;
	}

	.video_pf_num {
		font-size: 12px;
		margin-left: 8upx;
	}
</style>
